<template>
  <div ref="dom" class="charts chart-pie">
    <div class="no-src">
      <div>
        <Icon custom="iconfont iconzanwuneirong" class="btns" color=" #0E9DDB" />
        <p style="margin-top: 5px">暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { on, off } from '@/libs/tool'
export default {
  name: 'Pie',
  props: {
    value: Array,
    text: String,
    subtext: String,
    radius: {
      type: Array,
      default: () => ['60%', '70%']
    },
    center: {
      type: Array,
      default: () => ['50%', '50%']
    },
    roseType: {
      type: [Boolean, String],
      default: false
    },
    color: {
      type: Array,
      default: () => ['#038CFA', '#00D8FF', '#3AFBC6', '#F1A043', '#59FF8C', '#ed3f14']
    },
    legendShow: {
      // 是否显示图例
      type: Boolean,
      default: true
    },
    legendOrient: {
      // 图例位置
      type: String,
      default: 'vertical'
    },
    legendRight: {
      // 图例距离窗口右侧位置
      type: String,
      default: '5%'
    },
    legendTop: {
      // 图例距离窗口右侧位置
      type: String,
      default: '15%'
    },
    legendBottom: {
      // 图例距离窗口底部位置
      type: String,
      default: 'auto'
    },
    right: {
      // 位置
      type: Number,
      default: 0
    },
    centerText: {
      // 是否显示图例
      type: Boolean,
      default: true
    },
    centerText1: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: '重点人员'
    }
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    setOption(value) {
      this.value = value
    },
    init() {
      if (this.value.length === 0) {
        return
      }
      const option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        labelLine: {
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
          show: false,
          length: 0,
          length2: 0,
          smooth: false,
          lineStyle: {}
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14'
          }
        },
        series: [
          {
            name: this.name,
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            startAngle: 180,
            label: {
              show: false,
              position: 'center',
              formatter: this.centerText ? this.centerText1 + '{d}%' : '{c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14'
              }
            },
            labelLine: {
              show: false
            },
            data: this.value
          }
        ],
        color: this.color
      }
      const echarts = require('echarts')
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      // this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
    },
    genData(arr) {
      // arr.forEach(item => {
      //   item.label = {
      //     show: (function () {
      //       if (item.name !== '满意') {
      //         return false
      //       } else {
      //         return true
      //       }
      //     })(),
      //     formatter: function (v) {
      //       var text = ''
      //       if (v.name.length > 5) {
      //         text = v.name.substring(0, 5) + '...'
      //       } else {
      //         text = v.name
      //       }
      //       return text
      //     },
      //     position: (function () {
      //       if (item.value <= 10) {
      //         return 'inside'
      //       } else {
      //         return 'outside'
      //       }
      //     })()
      //   }
      //   item.labelLine = {
      //     show: (function () {
      //       if (item.name !== '满意') {
      //         return false
      //       } else {
      //         return true
      //       }
      //     })()
      //   }
      // })
      return arr
    },
    resize() {
      if (this.dom) {
        this.dom.resize()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      on(window, 'resize', this.resize)
    })
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (this.dom) {
          if (newVal) {
            this.setOption(newVal)
            this.init()
          } else {
            this.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  },
  updated() {},
  beforeDestroy() {
    off(window, 'resize', this.resize)
  }
}
</script>

<style scoped lang="less">
.charts {
  width: 100%;
  height: 100%;
}
.no-src {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2777ad;
  /deep/ .ivu-icon {
    font-size: 80px;
  }
  p {
    text-align: center;
  }
}
</style>
